<template>
  <view class="container">
    <view class="header">
      <view class="header-left" @click="goBack"><text class="back-icon">←</text></view>
      <text class="app-title">{{ getShortTitle(pageTitle) }}</text>
      <view class="header-icons"><text class="icon">⋯</text><text class="icon">─</text><text class="icon">◎</text></view>
    </view>

    <view class="main-content">
      <view class="ad-title"><text class="title-text">{{ item.title }}</text></view>

      <view class="tags-section">
        <view class="tag-item red">同城拼车</view>
        <view class="tag-item red">{{ getCategoryName(item.category) }}</view>
      </view>

      <view class="info-box">
        <view class="info-item"><text class="info-label">出发地</text><text class="info-value">{{ item.fromText }}</text></view>
        <view class="info-item"><text class="info-label">目的地</text><text class="info-value">{{ item.toText }}</text></view>
        <view class="info-item"><text class="info-label">乘车人数</text><text class="info-value">{{ item.passengers }}人</text></view>
        <view class="info-item"><text class="info-label">乘车时间</text><text class="info-value">{{ item.departureTime }}出发</text></view>
      </view>

      <view class="image-section" v-if="item.image">
        <image :src="item.image" mode="widthFix" style="width:100%"></image>
      </view>

      <view class="location-row">
        <text>📍 {{ item.pickupLocation }}</text>
      </view>

      <view class="stats-section">
        <text class="publish-date">{{ item.publishDate }}发布</text>
        <view class="stats-right"><text class="stat-item">分享:{{ item.shares || 0 }}</text><text class="stat-item">浏览:{{ item.views || 0 }}</text></view>
      </view>

      <view class="contact-section">
        <view class="contact-info">
          <text class="contact-label">联系人:{{ item.contactPerson }}</text>
          <text class="contact-note">联系我时,请说是在高安百事通上看到的,谢谢!</text>
        </view>
        <button class="call-btn" @click="makeCall(item)"><text class="phone-icon">📞</text><text class="call-text">打电话</text></button>
      </view>

      <view class="report-section">
        <view class="report-info"><text class="warning-icon">⚠</text><text class="report-text">如遇无效、虚假、诈骗信息,请立即举报</text></view>
        <button class="service-btn" @click="contactService">客服</button>
      </view>

      <view class="message-section">
        <view class="message-header"><text class="message-title">留言</text><view class="leave-message" @click="leaveMessage"><text class="leave-text">我要留言</text><text class="arrow">▶</text></view></view>
        <view class="view-comments"><text class="comments-link">查看更多评论</text></view>
      </view>
    </view>

    <view class="bottom-actions">
      <view class="left-nav">
        <view class="nav-item active" @click="navigateToTab('home')"><text class="nav-icon">🏠</text><text class="nav-text">首页</text></view>
        <view class="nav-item" @click="navigateToTab('publish')"><text class="nav-icon">✏️</text><text class="nav-text">发布</text></view>
        <view class="nav-item" @click="navigateToTab('mine')"><text class="nav-icon">😊</text><text class="nav-text">我的</text></view>
      </view>
      <view class="right-actions">
        <button class="action-btn share-btn" @click="shareItem">分享</button>
        <button class="action-btn consult-btn" @click="consultItem">咨询</button>
        <button class="action-btn call-action-btn" @click="makeCall(item)">打电话</button>
      </view>
    </view>
  </view>
</template>

<script>
import { getCarpoolDetail } from '@/api/carpool'
export default {
  data() {
    return {
      item: {
        id: 1,
        category: 'personFindCar',
        title: '人找车 有没有回高安的顺风车',
        departureTime: '2025-08-18 15:01',
        fromText: '浙江省 绍兴市 绍兴县',
        toText: '江西省 宜春市 高安市',
        passengers: 1,
        pickupLocation: '浙江省绍兴市柯桥区汤和祠街道',
        contactPerson: '陈先生',
        contactPhone: '13800138000',
        image: '/static/images/banner/banner03.jpg',
        publishDate: '2025-08-18',
        views: 29,
        shares: 0
      },
      pageTitle: '2025-08-18 15:01出发 人找车'
    }
  },
  onLoad(options) {
    if (options && options.id) {
      const id = Number(options.id)
      this.fetchDetail(id)
      // 兜底静态映射
      if (id === 2) {
        this.item = Object.assign({}, this.item, {
          id: 2,
          category: 'carFindPerson',
          title: '车找人 高安返回柯桥，顺路可捎人',
          departureTime: '2025-08-18 18:30',
          fromText: '江西省 宜春市 高安市',
          toText: '浙江省 绍兴市 柯桥区',
          passengers: 2,
          pickupLocation: '高安市站前广场',
          contactPerson: '李师傅',
          contactPhone: '13900139000',
          image: '/static/images/banner/banner02.jpg',
          publishDate: '2025-08-18',
          views: 52,
          shares: 2
        })
        this.pageTitle = '2025-08-18 18:30出发 车找人'
      }
    }
  },
  methods: {
    async fetchDetail(id) {
      try {
        const res = await getCarpoolDetail(id)
        if (res && res.data) {
          this.item = this.normalizeDetail(res.data)
          this.pageTitle = `${this.item.departureTime}出发 ${this.getCategoryName(this.item.category)}`
        }
      } catch (e) {
        console.log('获取详情失败，使用静态数据', e)
      }
    },
    normalizeDetail(raw) {
      const category = raw.category || raw.type || 'personFindCar'
      const fromText = raw.fromText || raw.from || raw.startAddress || raw.departure || `${raw.fromProvince || ''} ${raw.fromCity || ''} ${raw.fromArea || ''}`.trim()
      const toText = raw.toText || raw.to || raw.endAddress || raw.destination || `${raw.toProvince || ''} ${raw.toCity || ''} ${raw.toArea || ''}`.trim()
      const passengers = raw.passengers || raw.seatCount || raw.people || 1
      const departureTime = raw.departureTime || raw.startTime || raw.rideTime || ''
      const pickupLocation = raw.pickupLocation || raw.getOnAddress || raw.meetPoint || ''
      const contactPerson = raw.contactPerson || raw.linkman || raw.linkName || raw.userName || '联系人'
      const contactPhone = raw.contactPhone || raw.phone || raw.mobile || ''
      const publishDate = raw.publishDate || raw.createTime || ''
      const title = raw.title || `${this.getCategoryName(category)} 有没有顺风车`
      return {
        id: raw.id,
        category,
        title,
        departureTime,
        fromText,
        toText,
        passengers,
        pickupLocation,
        contactPerson,
        contactPhone,
        image: '/static/images/banner/banner03.jpg',
        publishDate,
        views: raw.viewCount || 0,
        shares: raw.shareCount || 0
      }
    },
    goBack() { uni.navigateBack() },
    getCategoryName(key) {
      const map = { personFindCar: '人找车', carFindPerson: '车找人', goodsFindCar: '货找车', carFindGoods: '车找货' }
      return map[key] || '拼车'
    },
    getShortTitle(title) { return title.length > 18 ? title.substring(0, 18) + '...' : title },
    makeCall(item) { uni.showToast({ title: `拨打电话给${item.contactPerson}`, icon: 'none' }) },
    leaveMessage() { uni.showToast({ title: '留言功能', icon: 'none' }) },
    shareItem() { uni.showToast({ title: '分享功能', icon: 'none' }) },
    consultItem() { uni.showToast({ title: '咨询功能', icon: 'none' }) },
    contactService() { uni.showToast({ title: '联系客服', icon: 'none' }) },
    navigateToTab(tab) {
      if (tab === 'publish') { uni.showToast({ title: '发布功能', icon: 'none' }) }
      else if (tab === 'mine') { uni.showToast({ title: '我的页面', icon: 'none' }) }
      else if (tab === 'home') { uni.switchTab({ url: '/pages/index' }) }
    }
  }
}
</script>

<style scoped>
.container { background-color: #f5f5f5; min-height: 100vh; padding-bottom: 120rpx; }
.header { background-color: #4CAF50; padding: 20rpx 30rpx; display: flex; justify-content: space-between; align-items: center; }
.header-left { display: flex; align-items: center; }
.back-icon { color: white; font-size: 36rpx; font-weight: bold; }
.app-title { color: white; font-size: 32rpx; font-weight: bold; flex: 1; text-align: center; margin: 0 20rpx; }
.header-icons { display: flex; gap: 20rpx; }
.icon { color: white; font-size: 32rpx; }

.main-content { background-color: white; margin: 20rpx; border-radius: 15rpx; padding: 30rpx; }
.ad-title { margin-bottom: 25rpx; }
.title-text { font-size: 32rpx; color: #333; font-weight: bold; line-height: 1.5; }

.tags-section { display: flex; gap: 15rpx; margin-bottom: 25rpx; }
.tag-item { background-color: #F44336; color: white; font-size: 22rpx; padding: 8rpx 16rpx; border-radius: 20rpx; }
.tag-item.red { background-color: #F44336; }

.info-box { background-color: #f8f8f8; border-radius: 10rpx; padding: 25rpx; margin-bottom: 25rpx; }
.info-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15rpx; }
.info-item:last-child { margin-bottom: 0; }
.info-label { font-size: 26rpx; color: #666; }
.info-value { font-size: 26rpx; color: #333; font-weight: bold; }

.image-section { margin-bottom: 20rpx; }
.location-row { margin-bottom: 20rpx; color: #333; font-size: 26rpx; }

.stats-section { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25rpx; padding-bottom: 20rpx; border-bottom: 1rpx solid #f0f0f0; }
.publish-date { font-size: 24rpx; color: #999; }
.stats-right { display: flex; gap: 20rpx; }
.stat-item { font-size: 24rpx; color: #999; }

.contact-section { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 25rpx; padding-bottom: 20rpx; border-bottom: 1rpx solid #f0f0f0; }
.contact-info { flex: 1; }
.contact-label { font-size: 26rpx; color: #333; font-weight: bold; margin-bottom: 10rpx; display: block; }
.contact-note { font-size: 24rpx; color: #666; line-height: 1.4; }
.call-btn { background-color: #F44336; color: white; border: none; border-radius: 25rpx; padding: 15rpx 25rpx; display: flex; align-items: center; gap: 10rpx; }
.phone-icon { font-size: 24rpx; }
.call-text { font-size: 24rpx; }

.report-section { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25rpx; padding-bottom: 20rpx; border-bottom: 1rpx solid #f0f0f0; }
.report-info { display: flex; align-items: center; flex: 1; }
.warning-icon { color: #FF9800; font-size: 28rpx; margin-right: 10rpx; }
.report-text { font-size: 24rpx; color: #666; }
.service-btn { background-color: #4CAF50; color: white; border: none; border-radius: 20rpx; padding: 12rpx 20rpx; font-size: 24rpx; }

.message-section { padding-bottom: 20rpx; }
.message-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15rpx; }
.message-title { font-size: 28rpx; color: #333; font-weight: bold; }
.leave-message { display: flex; align-items: center; gap: 10rpx; }
.leave-text { font-size: 26rpx; color: #666; }
.arrow { font-size: 24rpx; color: #666; }
.view-comments { text-align: center; }
.comments-link { font-size: 24rpx; color: #4CAF50; text-decoration: underline; }

.bottom-actions { position: fixed; bottom: 0; left: 0; right: 0; background-color: #f8f8f8; display: flex; justify-content: space-between; align-items: center; padding: 20rpx 30rpx; border-top: 1rpx solid #e0e0e0; z-index: 1000; }
.left-nav { display: flex; gap: 40rpx; }
.nav-item { display: flex; flex-direction: column; align-items: center; color: #999; }
.nav-item.active { color: #333; }
.nav-icon { font-size: 36rpx; margin-bottom: 8rpx; }
.nav-text { font-size: 20rpx; }
.right-actions { display: flex; gap: 15rpx; }
.action-btn { border: none; border-radius: 25rpx; padding: 12rpx 20rpx; font-size: 24rpx; color: white; }
.share-btn { background-color: #2196F3; }
.consult-btn { background-color: #FF9800; }
.call-action-btn { background-color: #F44336; }
</style>


